<template>
	<div class="container">
		<!-- 面包屑导航栏 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 模糊搜索框 -->
		<el-row>
			<!-- form表单行内表单 -->
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="驿站名称:">
					<el-input v-model="queryInfo.courierStationName" placeholder="请输入门店名称"></el-input>
				</el-form-item>
				<el-form-item label="小区名称:">
					<el-input v-model="queryInfo.communityName" placeholder="请输入门店手机号"></el-input>
				</el-form-item>
				<el-form-item label="添加时间:">
					<div class="block">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getPost">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-button type="primary" @click="add">添加驿站</el-button>

		<!-- Form 添加信息的嵌套的表单-->
		<!-- title；对话框的名称 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="postData">
				<el-form-item label="驿站名字" label-width="100px">
					<el-input placeholder="请输入驿站名字" v-model="postData.courierStationName" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="所属地区" label-width="100px">
					<el-cascader v-model="address" :options="citys"></el-cascader>
					<!-- <el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader> -->
				</el-form-item>

				<el-form-item label="" label-width="100px">
					<el-input placeholder="请输入详细地址" v-model="postData.courierStationAddress"
						autocomplete="off"></el-input>
				</el-form-item>
				<!-- <el-form-item label="所属小区" label-width="100px">
					<el-input placeholder="所在小区" v-model="postData.courierStationCommunityId" autocomplete="off"></el-input>
				</el-form-item> -->
				<el-form-item label="所属小区" label-width="100px">
					<el-autocomplete class="inline-input" v-model="selectedCommunityName"
						:fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"
						value-key="communityName"></el-autocomplete>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirmForm">确 定</el-button>
			</div>
		</el-dialog>


		<!-- 表格内容 -->
		<el-table :data="list" border style="width: 100%;margin-top: 20px; align: center;"
			:header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip>
			<el-table-column prop="courierStationId" label="ID" width="180" align="center"></el-table-column>
			<el-table-column prop="courierStationName" label="驿站名字" align="center"></el-table-column>
			<el-table-column prop="courierStationImage" label="驿站照片" width="180" align="center">
				<!-- 这里可能需要一个自定义的插槽来显示图片，因为prop通常用于文本数据 -->
				<template slot-scope="scope">
					<img :src="scope.row.courierStationImage" style="display: block; margin: auto; width: 100%;">
				</template>
			</el-table-column>
			<el-table-column prop="courierStationAddress" label="驿站地址" align="center"></el-table-column>
			<el-table-column prop="courierStationCommunityName" label="所在小区" align="center"></el-table-column>
			<el-table-column prop="courierStationOrderCount" label="订单总数" align="center"></el-table-column>
			<el-table-column prop="addTime" label="添加时间" align="center"></el-table-column>

			<el-table-column prop="courierStationStatus" label="状态" align="center">
				<template slot-scope="scope">
					<span style="padding: 5px 10px; color: #13CE66; background-color: #E7FAF0;"
						v-if="scope.row.courierStationStatus === 1">上架</span>
					<span style="padding: 5px 10px; color: #FF4949; background-color: #FFEDED;" v-else>下架</span>
					<!-- 注意：这里移除了textAlign属性，因为它不适用于<span> -->
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
					<el-button type="text" @click="upORdown(scope.row)">
						{{ scope.row.courierStationStatus === 1 ? '立即下架' : '立即上架' }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-row>
			<div class="block">
				<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 40]"
					:page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: {
					courierStationName: '',
					communityName: '',
					pageNum: 1, // 当前页码
					pageSize: 10, // 每页显示条数  
					// 分别保存开始时间和结束时间
					startTime: '',
					endTime: '',
				},
				total: 0, // 总数据条数  
				// 使用数组来保存日期范围，仅用于内部状态同步
				date: '',
				list: [],
				courierStationStatus: 1,
				//	form对话框
				title: '添加驿站',
				dialogFormVisible: false,
				postData: {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: '',
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: "",
				},
				citys: citys,
				address: [],
				//	选择小区下拉框数据
				// 存储从服务器加载的所有社区数据  
				communities: [],
				// 存储当前在 autocomplete 组件中输入的文本  
				selectedCommunityName: '',
				// 存储从下拉列表中选择的具体社区对象（如果需要的话）  
				selectedCommunity: null,
				URL: '',
				addOrUpdateFlag: 0
			}
		},
		methods: {
			// 处理每页条数变化
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.getPost(this.queryInfo.pageNum, val);
			},
			// 处理当前页码变化  
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.getPost(val, this.queryInfo.pageSize);
			},
			//	添加驿站
			add() {
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/courier?action=update'
				this.dialogFormVisible = true
				this.addOrUpdateFlag = 1
			},
			//	确定添加
			confirmForm() {
				let status = this.postData.courierStationStatus ? this.postData.courierStationStatus : 0
				//		courierStation/addCourierStation	接口
				this.$http({
						method: "post",
						url: this.URL,
						params: {
							courierStationId: this.postData.courierStationId,
							addOrUpdateFlag: this.addOrUpdateFlag,
							courierStationAddress: this.postData.courierStationAddress,
							courierStationCity: this.postData.courierStationCity,
							courierStationCommunityId: this.postData.courierStationCommunityId,
							courierStationDistrict: this.postData.courierStationDistrict,
							courierStationImage: this.postData.courierStationImage,
							courierStationName: this.postData.courierStationName,
							courierStationProvince: this.postData.courierStationProvince,
							courierStationStatus: status,
						}
					})
					.then((res) => {
						console.log(res.data);
						if (res.data.status == 200) {
							this.$message.success('操作成功！')
							this.dialogFormVisible = false
							this.getPost()
							this.cancel()
						}
					})
			},
			//	修改
			handleUpdate(row) {
				console.log(row);
				this.title = '编辑驿站'
				this.dialogFormVisible = true
				alert(row.courierStationId)
				this.postData = row
				this.selectedCommunityName = this.postData.courierStationCommunityName
				this.address = [this.postData.courierStationProvince, this.postData.courierStationCity, this.postData
					.courierStationDistrict
				]
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/courier?action=update'
				this.addOrUpdateFlag = 2
			},
			//	取消
			cancel() {
				this.dialogFormVisible = false
				this.postData = {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: '',
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: "",
				}
			},
			//	获取表格数据
			getPost(pageNum = 1, pageSize = 10) {
				this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/courier?action=selectAll', {
						params: this.queryInfo
					})
					.then((res) => {
						console.log(res);
						this.list = res.data.data.list
						this.total = res.data.data.total
						// console.log(res.data.data.list);
					})
			},
			//	切换上下架
			upORdown(row) {
				row.courierStationStatus = row.courierStationStatus === 1 ? 0 : 1
				this.postData = row
				this.URL = 'http://10.10.18.156:8089/panghudaojiaBackend/courier?action=update'
				this.addOrUpdateFlag = 2
				this.confirmForm()
			},

			//	选中小区下拉框内容的方法
			// 查询搜索方法  
			querySearch(queryString, cb) {
				let coms = this.communities
				let results = queryString ? coms.filter(this.createFilter(queryString)) : coms;
				// 调用 callback 返回建议列表的数据  
				console.log(results);
				cb(results);
			},

			// 创建筛选函数  
			createFilter(queryString) {
				return (community) => {
					console.log(community.communityName.toLowerCase().includes(queryString.toLowerCase()));
					return community.communityName.toLowerCase().includes(queryString
						.toLowerCase()); // 使用 includes 而不是 indexOf  
				};
			},

			// 处理选中项  
			handleSelect(item) {
				// 当从下拉列表中选择一个项目时  
				this.selectedCommunityName = item.communityName; // 更新输入框的显示文本  
				this.selectedCommunity = item; // 更新选中的社区对象  
				// 如果需要，可以在这里设置其他相关属性，比如 courierStationCommunityId  
				this.postData.courierStationCommunityId = item.communityId; // 注意：postData 需要在 data 中定义  
				console.log(this.postData.courierStationCommunityId);
			},

			async loadAll() {
				try {
					const res = await this.$http.get('http://10.10.18.156:8089/panghudaojiaBackend/community?action=selectAll', {
						params: {
							pageNum: 1,
							pageSize: 9999999,
						},
					});

					if (res.data.status === 200 && Array.isArray(res.data.data.list)) {
						this.communities = res.data.data.list; // 更新数据  
						console.log(this.communities);
					} else {
						console.error('Failed to load communities:', res.data);
						this.communities = []; // 如果没有数据，则清空数组  
					}
				} catch (error) {
					console.error('Error loading communities:', error);
					this.communities = []; // 捕获错误并清空数组  
				}
			},


		},
		mounted() {
			//	加载表格
			this.getPost()
			//	加载下拉小区的数据
			this.loadAll();
		},
		watch: {
			//	要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.postData.courierStationProvince = this.address[0]
				this.postData.courierStationCity = this.address[1]
				this.postData.courierStationDistrict = this.address[2]
			}
		},
	}
</script>

<style>
</style>